<template>
	<view class="">
		<uni-nav-bar :fixed="true" :border="false" backgroundColor="#f9f2ea" :statusBar="true" leftText="商城"
			@clickLeft="goBack"></uni-nav-bar>
		<view class="search-box">
			<view class="search">
				<image class="img" src="../../static/search.png" mode=""></image>
				<input class="input" type="text" v-model="keywords" placeholder="搜索关键词"
					placeholder-style="font-size: 24rpx;color: #ccc" value="" />
				<!-- <input class="input" type="text" v-model="keywords" placeholder="搜索关键词" placeholder-style="font-size: 24rpx;color: #ccc" value="" /> -->
				<view class="delete" v-if="keywords!=''">
					<image class="img" src="../../static/search_delete.png" mode="" @click="deleteSearch"></image>
				</view>
				<view class="search-line"></view>
				<view class="search-btn" @click="toSearch">
					搜索
				</view>
			</view>
		</view>
		<view class="search-mark">

		</view>
		<swiper class="swiper" v-if="swiperList.length > 0" :indicator-dots="true" :autoplay="true"
			indicator-active-color="#fff" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperList" :key="index" @click="toDetails(item)">
				<view class="swiper-item">
					<!-- 			<div>
						
					</div> -->
					<image class="img" :src="item.img" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="flex shop-type">
			<view class="item" :class="{'active': cateId==''}" @click="cateChange('')">
				<view class="name">
					全部
				</view>
			</view>
			<view class="item" :class="{'active': cateId==item.id}" v-for="(item, index) in shopList" :key="index"
				@click="cateChange(item.id)">
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="goods-list flex-between">
			<view class="item" v-for="(item, index) in goodlist" :key="index" @click="toArtistDetails(item.id)">
				<image class="img" :src="item.thumb" mode=""></image>
				<view class="content">
					<view class="content-title">
						{{item.name}}
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</view>
		<recommend></recommend>
		<FootBar></FootBar>
	</view>
</template>

<script>
	import {
		getCarousel,
		getGoodsCate,
		getGoodsList
	} from "@/api/public.js"
	import recommend from "@/components/recommend.vue"
	import FootBar from '@/components/footbar.vue'
	export default {
		data() {
			return {
				swiperList: [],
				shopList: [],
				keywords: "",
				cateId: "",
				page: 1,
				loadMoreShow: false,
				loadMoreStatus: "more",
				goodlist: [],
			}
		},
		onLoad() {
			this.getSwiperList();
			this.getGoodsCateList();
			this.getList();
		},
		watch: {
			keywords() {
				this.page = 1;
				this.goodlist = [];
				this.getList();
			},
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			toSearch() {
				this.page = 1;
				this.goodlist = [];
				this.getList();
			},
			toDetails(item) {
				if (item.type == 1) {
					this.toArtistDetails(item.info_id)
				}
			},
			deleteSearch() {
				this.keywords = "";
				console.log(this.keywords)
			},
			getSwiperList() {
				getCarousel(2).then(res => {
					console.log(res)
					this.swiperList = res.reData.data;
				})
			},
			getGoodsCateList() {
				getGoodsCate().then(res => {
					console.log(res.reData);
					this.shopList = res.reData.data;
				})
			},
			getList() {
				getGoodsList(this.page, this.keywords, this.cateId).then(res => {
					console.log(res.reData);
					if (this.page == 1) {
						if (!res.reData.data || res.reData.data.length == 0) {
							this.noMoreList = true
						} else {
							this.noMoreList = false
							this.showLoadMore = true
						}
					}
					if (res.reData.data) {
						let newData = res.reData.data;
						this.goodlist = this.goodlist.concat(newData);
						if (res.reData.data.length < 10) {
							this.loadMoreStatus = 'noMore';
						} else {
							this.loadMoreStatus = 'more';
						}
					}
				})
			},
			navChange(type) {
				this.navChoose = type
			},
			cateChange(id) {
				this.cateId = id;
				this.page = 1;
				this.goodlist = [];
				this.getList();
			},
			toArtistDetails(id) {
				uni.navigateTo({
					url: "../index/artWorkDetails?id=" + id
				})
			},
			toArtworkList() {
				uni.navigateTo({
					url: "artworkList"
				})
			}
		},
		components: {
			recommend,
			FootBar
		}
	}
</script>

<style lang="scss" scoped>
	.search-mark {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		width: 690rpx;
		height: 80rpx;
	}

	.search-box {
		position: fixed;
		z-index: 1000;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx 30rpx;
		background: #f9f2ea;
	}

	.search {
		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.07);
		width: 660rpx;
		height: 80rpx;
		background: #fffaf5;
		border-radius: 40rpx;
		padding-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.img {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}

		.input {
			width: 480rpx;
			padding-left: 70rpx;
		}

		.delete {
			position: absolute;
			right: 140rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 10000;
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.search-line {
			height: 30rpx;
			width: 2rpx;
			background-color: #e9e9e9;
		}

		.search-btn {
			width: 100rpx;
			text-align: center;
			font-size: 24rpx;
			line-height: 80rpx;
			margin-right: 20rpx;
		}
	}

	.swiper {
		height: 360rpx;

		.swiper-item {

			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				// width: 100%;
				// height: 100%;
			}
		}
	}

	.shop-type {
		flex-wrap: wrap;
		padding: 40rpx 30rpx 0;

		.item {
			padding: 16rpx 24rpx;
			background: rgba(222, 220, 221, 1);
			border-radius: 30rpx;
			margin-right: 20rpx;

			.name {
				font-size: 28rpx;
				line-height: 24rpx;
				color: rgba(140, 111, 111, 1);
				text-align: center;
			}

			&.active {
				background: rgba(140, 111, 111, 1);

				.name {
					color: #fff;
				}
			}
		}
	}

	.list {
		.title {
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 30rpx;
			height: 90rpx;
			font-size: 30rpx;
			line-height: 30rpx;
			background: #fff;

			.title-left {
				height: 30rpx;
				color: #666;
				border-left: 6rpx solid #cd2e40;
				padding-left: 24rpx;
			}

			.title-right {
				color: #1d8e88;
			}
		}
	}

	.goods-list {
		padding: 30rpx 30rpx 0;
		margin: 0 auto;
		flex-wrap: wrap;

		.item {
			width: 330rpx;
			height: 410rpx;
			margin-bottom: 30rpx;
			background: #fffaf5;
			box-shadow: 0px 2px 4px rgba(189, 163, 112, 0.25);

			.img {
				width: 100%;
				height: 280rpx;
			}

			.content {
				padding: 30rpx;

				.content-title {
					font-size: 28rpx;
					line-height: 28rpx;
					color: #333;
					font-weight: 700;
					margin-bottom: 20rpx;
				}

				.price {
					font-size: 24rpx;
					line-height: 24rpx;
					color: #bd313a;
				}
			}
		}
	}

	.exhibit {
		margin-bottom: 40rpx;
	}
</style>
